<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import type {FormInstance} from "element-plus";
import Editor from "@/components/Editor/index.vue";

const formRef = ref<FormInstance>();
type TInfo = {
    name:string,
    desc:string
}
const formInfo = reactive<TInfo>({
    name:"",
    desc:"1"
})
onMounted(()=>{
    setTimeout(()=>{
        formInfo.desc="你好"
    })
})
const submitForm = function(){
    console.log(formInfo.desc);
}
</script>

<template>
    <el-form ref="formRef" :model="formInfo">
        <el-descriptions title="医院信息管理" border>
            <template #extra>
                <el-button @click="submitForm" type="primary">保存信息</el-button>
            </template>
            <el-descriptions-item
                :rowspan="3"
                :width="140"
                label="Photo"
                align="center"
            >
                <el-image
                    style="width: 100px; height: 100px"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
            </el-descriptions-item>
            <el-descriptions-item label="Username" :span="2">kooriookami</el-descriptions-item>
            <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
            <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
            <el-descriptions-item label="Remarks">
                <el-tag size="small">School</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="医院名称">
                <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入医院名称"/>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="医院说明">
                <el-form-item prop="desc">
                    <Editor v-model="formInfo.desc" />
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>




</template>

<style scoped lang="less">
.el-form-item{
    margin-bottom: 0;
}
</style>